<template>
    <div class="fragmentUnionBox">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2017%2F0103%2F3_23846_5.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656571701&t=328d4fdda9091a8ae207e6ca97d95300" alt="">
        <div class="fragmentBox">
            <div class="ft-top">
                <span :class="{'have':fragmentNoList.indexOf(1)>-1}"></span>
                <span :class="{'have':fragmentNoList.indexOf(2)>-1}"></span>
            </div>
            <div class="ft-bottom">
                <span :class="{'have':fragmentNoList.indexOf(3)>-1}"></span>
                <span :class="{'have':fragmentNoList.indexOf(4)>-1}"></span>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{
        fragmentNoList:{
            type:Array,
            default:[]
        },
        cardUrl:String
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .fragmentUnionBox{
        position: relative;
        z-index: 10;
        font-size: 0;
        img{
            display: block;
            max-width: 600px;
            max-height: 500px;
            // -webkit-filter: grayscale(100%);
            // filter: grayscale(100%);
        }
        .fragmentBox{
            display: flex;
            flex-flow: column;
            position: absolute;
            z-index: 11;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            //background: rgba(0,0,0,0.5);
            .ft-top,.ft-bottom{
                display: flex;
                flex: 1;
                span{
                    flex: 1;
                    background: rgba(0,0,0,0.6);
                    &.have{
                        background: none;
                    }
                }
            }
            .ft-top{
                span{
                    border-bottom: 1px solid rgba(255,255,255,0.5);
                    &+span{
                        border-left: 1px solid rgba(255,255,255,0.5);
                    }
                }
            }
            .ft-bottom{
                span{
                    &+span{
                        border-left: 1px solid rgba(255,255,255,0.5);
                    }
                }
            }
        }
    }
</style>